<template>
  <div>
    <div class="liveBigScreenMain" :class="{ box_fixed: isFixed }">
      <template v-if="!isShowBuyBox">
        <div class="updateTime">
          <p>数据更新时间：{{ time }}</p>
          <!--  -->
          <img
            v-if="response01 && response01.status == 1"
            class="refreshIcon"
            src="../../../assets/three/refreshIcon.png"
            @click="update()"
          />
          <img v-else class="refreshIcon" src="../../../assets/three/refresh.png" @click="update()" />
        </div>
        <div class="header" :class="{ fixed: isFixed }" ref="headerBox">
          <div class="logoBox" :class="response01 && response01.status != 1 ? 'borNone' : ''" @click="goLiveDetailPage">
            <!-- <p class="livingGifwl" v-if="response01 && response01.status == 1">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </p>-->
            <div class="liveAnimation" v-if="response01 && response01.status == 1">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <img class="logo" v-if="response01" :src="response01.logo" alt />
          </div>
          <div class="headerRig">
            <div class="name_box">
              <img
                v-if="response01 && response01.is_shop == 1"
                class="car"
                src="@/assets/three/car.png"
                alt
              />
              <p class="name" v-if="response01 && response01.nickname" @click="goLiveDetailPage">{{ response01.nickname }}</p>
            </div>
            <p class="liveDuration" v-if="response01">
              直播时长：{{
              format_time(
              (response01.end_timestamp - response01.begin_timestamp) * 1000
              )
              }}
            </p>
            <p class="start" v-if="response01">
              开播时间：{{
              timestamp(response01 && response01.begin_timestamp, "Y-M-D h:m")
              }}
            </p>
            <p class="end" v-if="response01 && response01.status != 1">
              结束时间：
              {{
              timestamp(response01 && response01.end_timestamp, "Y-M-D h:m")
              }}
            </p>
            <p class="end" v-else>结束时间：--</p>
            <div class="fix_box">
              <p v-if="response01">
                直播时长：{{
                format_time(
                (response01.end_timestamp - response01.begin_timestamp) *
                1000
                )
                }}
              </p>

              <p
                class="xse"
                v-if="response01 && response01.is_shop == 1"
              >销售额:{{ format_num(response01.live_sales) }}</p>
              <p class="xse" v-else>销售额:--</p>
            </div>
          </div>
        </div>

        <!-- <template v-else>
      <div class="v_sti" ref="headerBox" :class="{'a':isFixed}">
        <div class="sticky_box">
          <div>
            <img
              class="sticky_name_logo"
              v-if="response01"
              :src="response01.logo"
              alt
            />
          </div>
          <div>
            <div class="sticky_name">
              <p v-if="response01">{{response01.nickname}}</p>
              <img
                class="car"
                v-if="response01 && response01.is_shop == 1"
                src="@/assets/three/car.png"
                alt
              />
            </div>
            <div class="sticky_bot">
              <p>
                直播时长：{{
                format_time(
                (response01.end_timestamp -
                response01.begin_timestamp) *
                1000
                )
                }}
              </p>
              <p>销售额：{{format_num(response01.live_sales)}}</p>
            </div>
          </div>
        </div>
      </div>
        </template>-->

        <div class="salesVolumeBox">
          <jinbi1 v-if="response01 && response01.status == 1 && isShowJinBi" />
          <p class="volume">销售额</p>
          <div class="numScorll_box">
            <div class="numScorll_item" ref="numScorllBox">
              <div class="numScorll">
                <template v-for="(item, index) in live_sales">
                  <div class="numItem" :key="index" v-if="isNumberFn(item)">
                    <span
                      :style="{
                        transform: 'translateY(' + item * 60 * -1 + 'px)'
                      }"
                    >
                      <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                    </span>
                  </div>
                  <!-- 这里报错目前先不怎么解决 -->
                  <b v-if="item == ','">,</b>
                  <b v-if="item == '.'">.</b>
                  <b v-if="item == '-'">-</b>
                  <!-- 提交测试 -->
                </template>
              </div>
              <i class="num_unit" ref="numF" v-show="numNnit">{{ numNnit }}</i>
            </div>
          </div>
          <!-- <p class="volumeNum">222332w</p> -->
        </div>

        <ul class="infoBox">
          <li>
            <div class="numScorll">
              <template v-for="(item, index) in line_count">
                <div class="numItem" :key="index" v-if="isNumberFn(item)">
                  <span
                    :style="{
                      transform: 'translateY(' + item * 60 * -1 + 'px)'
                    }"
                  >
                    <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                  </span>
                </div>
                <!-- 这里报错目前先不怎么解决 -->
                <b v-if="item == ','">,</b>
                <b v-if="item == '.'">.</b>
                <b v-if="item == '-'">-</b>
                <!-- 提交测试 -->
              </template>
            </div>
            <p class="p1">当前在线人数</p>
          </li>
          <li>
            <div class="numScorll">
              <template v-for="(item, index) in view_count">
                <div class="numItem" :key="index" v-if="isNumberFn(item)">
                  <span
                    :style="{
                      transform: 'translateY(' + item * 60 * -1 + 'px)'
                    }"
                  >
                    <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                  </span>
                </div>
                <!-- 这里报错目前先不怎么解决 -->
                <b v-if="item == ','">,</b>
                <b v-if="item == '.'">.</b>
                <b v-if="item == '-'">-</b>
                <!-- 提交测试 -->
              </template>
            </div>
            <p class="p1">累计观看人次</p>
          </li>
          <li>
            <p class="p2" v-if="response01">{{ response01.avglooktime }}</p>
            <p class="p1">人均看播时长</p>
          </li>
          <li>
            <div class="numScorll">
              <template v-for="(item, index) in livepro">
                <div class="numItem" :key="index" v-if="isNumberFn(item)">
                  <span
                    :style="{
                      transform: 'translateY(' + item * 60 * -1 + 'px)'
                    }"
                  >
                    <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                  </span>
                </div>
                <!-- 这里报错目前先不怎么解决 -->
                <b v-if="item == ','">,</b>
                <b v-if="item == '.'">.</b>
                <b v-if="item == '-'">-</b>
                <!-- 提交测试 -->
              </template>
            </div>
            <p class="p1">直播商品数</p>
          </li>
          <li>
            <div class="numScorll">
              <template v-for="(item, index) in live_volume">
                <div class="numItem" :key="index" v-if="isNumberFn(item)">
                  <span
                    :style="{
                      transform: 'translateY(' + item * 60 * -1 + 'px)'
                    }"
                  >
                    <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                  </span>
                </div>
                <!-- 这里报错目前先不怎么解决 -->
                <b v-if="item == ','">,</b>
                <b v-if="item == '.'">.</b>
                <b v-if="item == '-'">-</b>
                <!-- 提交测试 -->
              </template>
            </div>
            <p class="p1">商品销量</p>
          </li>
          <li>
            <div class="numScorll">
              <template v-for="(item, index) in avglook">
                <div class="numItem" :key="index" v-if="isNumberFn(item)">
                  <span
                    :style="{
                      transform: 'translateY(' + item * 60 * -1 + 'px)'
                    }"
                  >
                    <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                  </span>
                </div>
                <!-- 这里报错目前先不怎么解决 -->
                <b v-if="item == ','">,</b>
                <b v-if="item == '.'">.</b>
                <b v-if="item == '-'">-</b>
                <!-- 提交测试 -->
              </template>
            </div>

            <p class="p1">UV价值</p>
          </li>
          <li>
            <div class="numScorll">
              <template v-for="(item, index) in avgprice">
                <div class="numItem" :key="index" v-if="isNumberFn(item)">
                  <span
                    :style="{
                      transform: 'translateY(' + item * 60 * -1 + 'px)'
                    }"
                  >
                    <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                  </span>
                </div>
                <!-- 这里报错目前先不怎么解决 -->
                <b v-if="item == ','">,</b>
                <b v-if="item == '.'">.</b>
                <b v-if="item == '-'">-</b>
                <!-- 提交测试 -->
              </template>
            </div>
            <p class="p1">客单价</p>
          </li>
          <li>
            <div class="numScorll" v-if="livefanRatess !=0">
              <template v-for="(item, index) in livefanRate">
                <div class="numItem" :key="index" v-if="isNumberFn(item)">
                  <span
                    :style="{
                      transform: 'translateY(' + item * 60 * -1 + 'px)'
                    }"
                  >
                    <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                  </span>
                </div>
                <!-- 这里报错目前先不怎么解决 -->
                <b v-if="item == ','">,</b>
                <b v-if="item == '.'">.</b>
                <b v-if="item == '-'">-</b>
                <!-- 提交测试 -->
              </template>
              <span class="sty">%</span>
            </div>
            <div class="numScorll numscorll0" v-if="livefanRatess == 0">
               <span>0 %</span>
            </div>
            <p class="p1">转粉率</p>
          </li>
          <li>
            <div class="numScorll">
              <template v-for="(item, index) in incfan">
                <div class="numItem" :key="index" v-if="isNumberFn(item)">
                  <span
                    :style="{
                      transform: 'translateY(' + item * 60 * -1 + 'px)'
                    }"
                  >
                    <i v-for="(ic, indexc) in 10" :key="indexc">{{ ic - 1 }}</i>
                  </span>
                </div>
                <!-- 这里报错目前先不怎么解决 -->

                <b v-if="item == ','">,</b>
                <b v-if="item == '.'">.</b>
                <b v-if="item == '-'">-</b>
                <!-- <! 提交测试 -->
              </template>
            </div>
            <p class="p1">本场涨粉人数</p>
          </li>
        </ul>
      </template>
      <div class="bg1" v-if="isShowBuyBox">
        <img src="@/assets/three/bg1.png" alt />
        <img src="@/assets/three/black.png" alt />
      </div>
      <!-- tab -->
      <van-tabs
        v-model="active"
        background="#272727"
        title-active-color="#fff"
        :offset-top="isShowBuyBox?0:'1.56667rem'"
        :sticky="true"
        @scroll="tabScrollFn"
        scrollspy
        :duration="0.1"
      >
        <van-tab title="直播商品分析" name="1">
          <liveGoodsAnalysis
            v-if="response01"
            :status="response01 && response01.status ? response01.status : ''"
            ref="child1"
            @goodsDatas="goodsDatas"
          ></liveGoodsAnalysis>
          <div class="bg2" v-else>
            <img src="@/assets/three/bg2.png" alt />
            <img src="@/assets/three/black.png" alt />
          </div>
        </van-tab>
        <van-tab title="直播数据分析" name="2">
          <liveDataAnalysis
            v-if="response01"
            ref="child2"
            :status="response01 && response01.status ? response01.status : ''"
            :livepro="response01.is_shop == 1 ? response01.livepro : '--'"
          ></liveDataAnalysis>
          <div v-else class="bg3">
            <img src="@/assets/three/bg3.png" alt style="margin-top:0.26rem;" />
            <img src="@/assets/three/black.png" alt />
          </div>
        </van-tab>
        <van-tab title="直播观众分析" name="3">
          <liveAudienceAnalysis
            :status=" response01.status ? response01.status : ''"
            :pie_data01="pie_data01"
            ref="child3"
            v-if="response01"
          ></liveAudienceAnalysis>
          <div v-else class="bg3">
            <img src="@/assets/three/bg4.png" alt style="margin-top:0.26rem;" />
            <img src="@/assets/three/black.png" alt />
          </div>
        </van-tab>
      </van-tabs>
      <!-- 我是有底线的~ -->
      <FooterText />
    </div>
    <PageLoading v-if="isLoading" />
    <IncludedBut v-if="isShow" :active="active" :title="btnTitle" :clickFn="popVipBox" />
  </div>
</template>

<script>
import IncludedBut from '@/pages/mine/IncludedBut.vue';
import liveAudienceAnalysis from './liveAudienceAnalysis.vue';
import liveDataAnalysis from './liveDataAnalysis.vue';
import liveGoodsAnalysis from './liveGoodsAnalysis.vue';
import PageLoading from '@/component/pageLoading.vue';
import jinbi1 from '@/component/live_jinbi1.vue';
export default {
  props: [],
  data() {
    return {
      numNnit: '', //滚动数字底下单位名称
      isShowBuyBox:false, //是否弹出开通vip弹框
      loading: false,
      timer: null,
      timer2: null,
      live_sales: null, //销售额
      line_count: null, //在线人数
      view_count: null, //累计观看人次
      live_volume: null, //累计观看人次
      avgprice: null, //累计观看人次
      livepro: null, //累计观看人次
      avglook: null, //累计观看人次
      incfan: null, //累计观看人次
      livefanRate: null, //累计观看人次
      livefanRatess:null,
      time: '',
      //这里的数字数组是个8位数，只是占位，不能直接使用，看需求有可能是10位或11、12、20等等
      prosecutorArr: [],
      //这个参数是后台传给我们的，也不能直接使用，需要转换
      livesalesNums: 0, //
      // active: '1',
      isSticky: false,
      response01: null,
      tabIsfixed: false, //  tab是否吸顶
      isFixed: false,
      fixedVal: 0,
      isFristScroll: false, //是否出发过一次吸顶
      isFristLoop: true, //是否是第一次轮训
      isLoading: true,
      active: '0',
      vipList: [],
      btnTitle: '开通会员',
      isShow: false,
      isShowJinBi: false,
      isFromLiveDtails:true, //来源是否为直播详情，默认true
    };
  },
  components: {
    liveAudienceAnalysis,
    liveGoodsAnalysis,
    liveDataAnalysis,
    PageLoading,
    jinbi1,
    IncludedBut
  },
  computed: {},
  created() {
    let that = this;
    let vLevel = localStorage.getItem('vipLevel');
    let initLevel = this.initVipLevel(vLevel);
    // let minLevel = this.initVipLevel(this.$store.state.userRoot[4][27].ownerMinLevel);
    let minLevel = this.initVipLevel(5);
    if (initLevel <= 1) {
      this.btnTitle = '立即开通';
    } else if (initLevel < minLevel) {
      this.btnTitle = '立即升级';
    } else {
      this.btnTitle = '立即续费';
    }

    // let count = 0;
    this.get_data01().then((code)=>{
      if(code == 0){
        this.time1();
        this.get_data();
        // this.timer2 = setInterval(() => { //10秒内再开一个定时器 两秒刷一次接口，尽快的更新顶部GMV数据
        //   if(count<8){
        //     this.get_data01();
        //     count+=2;
        //   }else{
        //     clearInterval(this.timer2);
        //   }
        // }, 2000);
        this.timer = setInterval(() => {
          this.time1();
          this.get_data01();
        }, 10000);
      }else if(code == 1003){
        this.isShowBuyBox = true;
        this.$popVip({
          show: true,
          obj: that.$router,
          minLeve: 5
        });
        this.isShow = true;
      }
    });
  },
  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.timer2);
    this.timer = null;
    this.timer2 = null;
  },
  mounted() {
    window.scroll = 0;
    window.onscroll = e => {
      this.setHeaderFixed();
    };
    setTimeout(() => {
      this.isShowJinBi = true;
    }, 1000);
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.isFromLiveDtails = (from.name == 'LiveForDetailsMain');
    });
  },
  methods: {
    goLiveDetailPage(){
      let rid = this.$route.query.id;
      let aid = this.response01.author_id;
      if(this.isFromLiveDtails){
        this.$router.go(-1);
      }else{
        this.$router.push({
          path: '/LiveForDetailsMain',
          query: { 'room_id': rid,'author_id':aid},
        });
      }
    },
    setNumBoxWidth() {
      //设置滚动数组的宽度，用来定位单位符号
      let box = this.$refs.numScorllBox;
      let numF = this.$refs.numF;
      if (box && numF) {
        numF.style.visibility = 'hidden';
        box.removeAttribute('style');
        let width = box.clientWidth + 'px';
        box.style.width = width;
        numF.style.visibility = 'initial';
      }
      let num = this.livesalesNums;
      let numNnit = '';
      if (num && num >= 10000) {
        if (num < 100000) {
          numNnit = '万';
        } else if (num < 1000000) {
          numNnit = '十万';
        } else if (num < 10000000) {
          numNnit = '百万';
        } else if (num < 100000000) {
          numNnit = '千万';
        } else if (num < 1000000000) {
          numNnit = '亿';
        } else if (num < 10000000000) {
          numNnit = '十亿';
        } else if (num < 100000000000) {
          numNnit = '百亿';
        } else if (num < 1000000000000) {
          numNnit = '千亿';
        }
      } else {
        numNnit = '';
      }
      this.numNnit = numNnit;
    },
    popVipBox() {
      let that = this;
      this.$popVip({
        show: true,
        obj: that.$router,
        minLeve: 5
      });
    },
    goodsDatas(data) {
      //监听商品列表组件数据
      if (!this.response01.live_sales && data.livesales) {
        //如果顶部接口返回的GMV为0，并且商品接口GMV有值，则取商品接口的
        this.live_sales = this.milliFormat(data.livesales);
      }
      if (!this.response01.live_volume && data.livevolume) {
        //商品数量取值 - 同上
        this.live_volume = this.milliFormat(data.livevolume);
      }
    },
    tabScrollFn(callbackPms) {
      //获取tab置顶的参数
      // console.log(callbackPms)
      this.tabIsfixed = callbackPms.isFixed;
    },
    setHeaderFixed() {
      //设置顶部浮动

      let headerBoxEl = this.$refs.headerBox;
      if (!headerBoxEl) return;
      if (!this.isFristScroll) {
        let elTop = headerBoxEl.offsetTop;

        this.fixedVal = elTop;
        this.isFristScroll = true;
      }

      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= this.fixedVal) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    // 点击更新
    update() {
      if (this.response01.status == 2) return;
      this.response01 = [];
      this.time1();
      this.get_data01();
      this.$refs.child1.table_data01 = [];
      this.$refs.child1.table_data02 = [];
      this.$refs.child1.get_data_table();
    },
    // 时间
    time1() {
      var date = new Date();
      var year = date.getFullYear();
      var mon = date.getMonth() + 1;
      var day = date.getDate();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      var submitTime = '';
      submitTime += year + '-';
      if (mon >= 10) {
        submitTime += mon + '-';
      } else {
        submitTime += '0' + mon + '-';
      }
      if (day >= 10) {
        submitTime += day;
      } else {
        submitTime += '0' + day;
      }
      submitTime += ' ';
      if (h >= 10) {
        submitTime += h + ':';
      } else {
        submitTime += '0' + h + ':';
      }
      if (m >= 10) {
        submitTime += m + ':';
      } else {
        submitTime += '0' + m + ':';
      }
      if (s > 10) {
        submitTime += s;
      } else {
        submitTime += '0' + s;
      }
      this.time = submitTime;
    },
    //
    isNumberFn(num) {
      return !isNaN(Number(num));
    },
    PrefixInteger(num, length) {
      //给数字前面补零 比如‘59832’补成8位即位‘00059832’
      return (Array(length).join('0') + num).slice(-length);
    },
    milliFormat(num) {
      //添加千位符
      // if (this.response01.is_shop == 0) {
      //   return '--';
      // }
      if(!num){
        return '--'
      }
      var res = num.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ',';
        });
      });
      return res;
    },
    plusNPrAll() {
      this.prosecutorArr = this.milliFormat(this.livesalesNums ? this.livesalesNums : '0');
    },
    getRandomNumber(min, max) {
      //为了看效果，refreshLeft触发增加数字看效果，和后台数据过来效果一样，不管增加或减少
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    refreshLeft(dataObj) {
      //刷新数据，我这里因为静态看效果，联调时将请求写在里面就好了
      // this.numbers = parseInt(this.numbers)+ this.getRandomNumber(1, 10000)
      this.livesalesNums = dataObj.live_sales;
      let live_sales = parseFloat(dataObj.live_sales); //销售额
      let line_count = parseFloat(dataObj.line_count); //当在线人数
      let view_count = parseFloat(dataObj.view_count); //累计观看人次
      let live_volume = parseFloat(dataObj.live_volume); //商品销量
      let livepro = parseFloat(dataObj.livepro); //直播商品数
      let avglook = parseFloat(dataObj.avglook); //uv
      let avgprice = parseFloat(dataObj.avgprice); //客单价
      let avglooktime = parseFloat(dataObj.avglooktime); //人均看波时长
      let livefanRate = parseFloat(dataObj.livefanRate); //转粉率
      let incfan = parseFloat(dataObj.incfan); //转粉率

      //添加千位符
      if (this.isFristLoop) {
        //第一次刷顶部接口直接赋值，之后每次如果数值不为0则赋值
        this.live_sales = this.milliFormat(live_sales);
        this.live_volume = this.milliFormat(live_volume);
      } else {
        if (live_sales) {
          this.live_sales = this.milliFormat(live_sales);
        }
        if (live_volume) {
          this.live_volume = this.milliFormat(live_volume);
        }
      }
      this.line_count = this.milliFormat(line_count);
      this.view_count = this.milliFormat(view_count);
      this.avglook = this.milliFormat(avglook);
      this.avgprice = this.milliFormat(avgprice);
      this.livepro = this.milliFormat(livepro);
      this.avglooktime = this.milliFormat(avglooktime);
      // this.live_sales = this.milliFormat(live_sales);
      this.livefanRate = this.milliFormat(livefanRate);
      this.incfan = this.milliFormat(incfan);
    },
    get_data() {
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/live/LiveSpeedUp',
        params: {
          roomid: that.$route.query.id
        }
      })
        .then(response => {
          if (response.data.code == 0) {
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    get_data01() {
      return new Promise((resolve,reject)=>{
        let that = this;
        this.Newloading = true;
        this.$axios({
          method: 'get',
          url: '/api/live/GetLive',
          params: {
            // room_id: '6992070055278267150'
            room_id: that.$route.query.id
          }
        })
          .then(response => {
            this.isLoading = false;
            if (response.data.code == 0) {

              this.response01 = response.data.data;
              this.path = this.response01.room_url;
              this.pie_data01 = response.data.data.fans_from;
              this.Newloading = false;
              this.livefanRatess=response.data.data.livefanRate;

              let str =  ''+this.response01.live_sales;
              let newStr = '';
              for (let i = 0; i < str.length; i++){
                if(!isNaN(str[i])){
                  newStr+='0'
                }else{
                  newStr+='.'
                }
              }
              this.live_sales = this.milliFormat(newStr);
              
              if (this.response01.status == 2) {
                clearInterval(this.timer);
                clearInterval(this.timer2);
              }
              // this.response01.live_sales = 0;
              setTimeout(()=>{
                this.refreshLeft(this.response01); //设置顶部滚动数值
                this.isFristLoop = false;
                this.setNumBoxWidth();
              });
            }
            if (this.response01) {
              document.title = this.response01.nickname + '-数据实时监测大屏-掌上精选';
            }
            resolve(response.data.code);
          })
          .catch(error => {
            reject(error);
            console.log(error);
          });
      });
    },
    initVipLevel(aLevel) {
      let level = '';
      if (aLevel == 0) {
        level = 0;
      } else if (aLevel == 3) {
        level = 1;
      } else if (aLevel == 4) {
        level = 2;
      } else if (aLevel == 5) {
        level = 3;
      } else if (aLevel == 1) {
        level = 4;
      } else if (aLevel == 2) {
        level = 5;
      }
      return level;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/common/common.styl';
.liveBigScreenMain {
  width: 10rem;
  min-height: 100vh;
  box-sizing: border-box;
  background: #191f33;
  padding-top: 0.4rem;
  .sticky_box {
    display: flex;
    width: 9.2rem;
    padding-top: 0.4rem;
    height: 1.426667rem !important;
    margin: auto;
    > div {
      &:nth-child(1) {
        width: 1.093333rem;
        height: 1.093333rem;
        flex: 0 0 1.093333rem;
        background-color: #ffffff;
        border-radius: 50%;
        border: 0.026667rem solid #ff31a5;
        margin-right: 0.266667rem;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
          vertical-align: top;
        }
      }
      &:nth-child(2) {
        .sticky_name {
          display: flex;
          margin-bottom: 0.266667rem;
          > p {
            font-size: 0.4rem;
            font-weight: 600;
            max-width: 6.666667rem;
            color: #ffffff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
            margin-right: 0.133333rem;
          }
          > img {
            width: 0.44rem;
            height: 0.373333rem;
            align-self: center;
          }
        }
        .sticky_bot {
          display: flex;
          > p {
            font-size: 0.32rem;
            color: #c3cadf;
            &:nth-child(1) {
              margin-right: 0.4rem;
            }
          }
        }
      }
    }
  }

  //
  .updateTime {
    width: 9.2rem;
    height: 0.8rem;
    // background-color: #c3cadf;
    border-radius: 0.133333rem;
    margin: auto;
    display: flex;
    background: rgba(195, 202, 223, 0.1);
    position: relative;
    > p {
      font-size: 0.32rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #c3cadf;
      opacity: 0.5;
      margin: auto;
    }
    .refreshIcon {
      width: 0.32rem;
      height: 0.32rem;
      // background-color: #fd7f2c;
      position: absolute;
      right: 0.466667rem;
      top: 0.24rem;
    }
  }

  .header {
    background: #191f33;
    // width: 9.2rem;
    // margin: auto;
    width: 10rem;
    padding-left: 0.4rem;
    box-sizing: border-box;
    padding-top: 0.32rem;
    padding-bottom: 0.4rem;
    display: flex;
    transition: all linear 100ms;
    position: relative;
    .fix_box {
      display: none;
    }
    .logoBox {
      position: relative;
      width: 1.466667rem;
      height: 1.466667rem;
      flex: 0 0 1.466667rem;
      border: 0.026667rem solid #ff31a5;
      border-radius: 50% !important;
      margin-right: 16px;

      .logo {
        display:block;
        width: 100%;
        height: 100%;
        border-radius: 50% !important;
      }
    }

    .headerRig {
      .name_box {
        display: flex;
        .name {
          max-width: 6.666667rem;
          font-size: 0.4rem;
          font-weight: 600;
          color: #ffffff;
          padding-top: 0.186667rem;
          padding-bottom: 0.293333rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
        }
        .car {
          margin-right: 0.133333rem;
          align-self: center;
          width: 0.44rem;
          height: 0.373333rem;
        }
      }

      .liveDuration {
        font-size: 0.32rem;
        color: #c3cadf;
        margin-bottom: 0.133333rem;
      }
      .start {
        font-size: 0.32rem;
        color: #c3cadf;
        margin-bottom: 0.133333rem;
      }
      .end {
        font-size: 0.32rem;
        color: #c3cadf;
      }
    }
  }
  .salesVolumeBox {
    width: 9.2rem;
    height: 2.5rem;
    background: url(../../../assets/three/salesVolumeBg.png) no-repeat;
    background-size: 100% 100%;
    border-radius: 0.133333rem;
    margin: auto;
    box-sizing: border-box;
    padding-top: 0.2rem;
    .volumeNum {
      font-size: 0.666667rem;
      color: #ffffff;
      text-align: center;
      font-family: Dinpro-medium;
    }
    .volume {
      width: 100%;
      text-align: center;
      font-size: 0.32rem;
      margin-top: 0.066667rem;
      color: #ffffff;
      opacity: 0.5;
    }
  }
  .infoBox {
    width: 9.2rem;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    padding-top: 0.2rem;
    margin-bottom: 0.2rem;
    justify-content: space-between;
    > li {
      padding-top: 0.466667rem;
      width: 32%;
      box-sizing: border-box;
      height: 2rem;
      background-color: rgba(195, 202, 223, 0.1);
      border-radius: 0.133333rem;
      margin-bottom: 0.2rem;

      .numScorll {
        height: 0.5rem;
        overflow: hidden;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        // margin-top: 6px;
        .numItem {
          display: inline-block;
          height: 60px;
          overflow: hidden;
          margin: 0 1px;
          span {
            display: inline-block;
            position: relative;
            transition: all 1200ms ease-in-out;
            vertical-align: middle;
            font-size: 0;
          }
          i {
            display: block;
            height: 60px;
            line-height: 60px;
            font-size: 0.453333rem;
            font-style: normal;
            color: #fff;
            font-weight: normal;
            font-stretch: normal;
            font-family: DINAlternate-Bold;
          }
        }
        b {
          display: inline-block;
          height: 60px;
          margin: 0 1px;
          line-height: 60px;
          font-style: normal;
          font-size: 0.453333rem;
          color: #fff;
          font-family: DINAlternate-Bold;
          // vertical-align: middle;
        }
      }
      .p1 {
        text-align: center;
        margin-top: 0.2rem;
        font-size: 0.32rem;
        color: #c3cadf;
        opacity: 0.5;
      }
    }
  }
  //
  .numScorll {
    height: 0.88rem;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 6px;
    .numItem {
      display: inline-block;
      height: 60px;
      overflow: hidden;
      margin: 0 1px;
      span {
        display: inline-block;
        position: relative;
        transition: all 2000ms ease-in-out;
        vertical-align: middle;
        font-size: 0;
      }
      i {
        display: block;
        height: 60px;
        line-height: 60px;
        font-size: 0.666667rem;
        font-style: normal;
        color: #fff;
        font-weight: normal;
        font-stretch: normal;
        font-family: DINAlternate-Bold;
      }
    }
    b {
      display: inline-block;
      height: 60px;
      margin: 0 1px;
      line-height: 60px;
      font-style: normal;
      font-size: 0.666667rem;
      color: #fff;
      font-family: DINAlternate-Bold;
      // vertical-align: middle;
    }
    // height: 60px;
    // margin-top: 10px;
    // text-align: center;
    // font-weight: normal;
    // font-stretch: normal;
    // font-family: DINAlternate-Bold;
    // color: #ffffff;
    // overflow: hidden;
    // .numItem{
    //   display: inline-block;
    //   width: 30px;
    //   height: 60px;
    //   color: #fff;
    //   text-align: center;
    //   line-height: 60px;
    //   margin: 0 2px;
    //   position: relative;
    //   z-index: 3;
    //   font-size: 60px;
    //   vertical-align: middle;
    //   font-weight: normal;
    //   font-stretch: normal;
    //   overflow: hidden;
    //   ul{
    //     width: 100%;
    //     height: 600px;
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     transition: all 1200ms ease-in-out;
    //     li{
    //       width: 100%;
    //       height: 60px;
    //       line-height: 60px;
    //       float: left;
    //       font-style: normal;
    //       font-size: 60px;
    //       color: #fff;
    //     }
    //   }
    // }
  }
  // 转粉率
  .numscorll0{
    height: 60px;
    line-height: 60px;
    font-size:0.453333rem;
    font-style: normal;
    color:#fff;
    font-weight:normal;
    font-stretch: normal;
    font-family:DINAlternate-Bold;
  }
  .p2,
  .sty {
    font-family: DINPro-Medium;
    font-size: 0.453333rem;
    // height: 0.466667rem;
    text-align: center;
    color: #ffffff;
  }
  .sty{
    display:inline-block;
    margin-bottom:-0.15rem
  }
  touch-action: pan-y;
  .fixed {
    position: fixed;
    top: 0;
    padding-left: 0.4rem;
    width: 10rem;
    overflow: hidden;
    background: #191f33;
    z-index: 99999999;
    .logoBox {
      width: 1.066667rem !important;
      height: 1.066667rem !important;
      flex: 0 0 1.066667rem !important;
      background-color: #ffffff;
      border-radius: 50% !important;
      margin-right: 0.093333rem !important;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 0.266667rem;
        vertical-align: top;
      }
    }
    .headerRig {
      height: 0.973333rem;
    }
    .name_box {
      height: 0.483333rem;
      align-self: center;
      margin-top: 0.066667rem;
      margin-bottom: 0.166667rem;
      .name {
        padding: 0 !important;
        font-size: 0.4rem !important;
      }
    }
    .start,
    .end {
      display: none !important;
    }
    // .salesVolumeBox {
    //   display: none !important;
    // }
    .liveDuration {
      display: none;
    }
    .fix_box {
      display: flex;
      > p {
        &:nth-child(1) {
          font-size: 0.32rem;
          color: #c3cadf;
          margin-bottom: 0.133333rem;
          margin-right: 0.4rem;
        }
      }
    }
    .xse {
      font-size: 0.32rem;
      white-space: nowrap;
      color: #c3cadf;
      margin-left: -0.066667rem;
    }
  }

  .livingGifwl {
    position: absolute;
    bottom: 0;
    right: 0.026667rem;
    width: 0.43rem;
    height: 0.43rem;
    background-image: linear-gradient(90deg, #ff005a 1%, #ff31a5 100%),
      linear-gradient(#888888, #888888);
    background-blend-mode: normal, normal;
    border-radius: 0.073333rem;
    > span {
      bottom: 0.063333rem;
      background-color: #fff;
      display: inline-block;
      // width: 0.06667rem;
      height: 0.16rem;
      position: absolute;
      border-top-left-radius: 0.026667rem;
      border-top-right-radius: 0.026667rem;
    }
  }
  .borNone {
    border: none !important;
  }
}

.box_fixed {
  padding-top: 2.3rem;
}
.bg1 {
  width: 100%;
  img {
    &:nth-child(1) {
      width: 100%;
    }
    &:nth-child(2) {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2.813333rem;
      transform: translate(-50%, 75%);
      opacity: 0.3;
    }
  }
}
.bg2 {
  width: 100%;
  img {
    &:nth-child(1) {
      width: 100%;
    }
    &:nth-child(2) {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2.813333rem;
      transform: translate(-50%, -50%);
      opacity: 0.3;
    }
  }
}
.bg3 {
  width: 100%;
  img {
    &:nth-child(1) {
      width: 100%;
    }
    &:nth-child(2) {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2.813333rem;
      transform: translate(-50%, -50%);
      opacity: 0.2;
    }
  }
}
.bg4 {
  width: 100%;
  height: 10.666667rem;
  img {
    &:nth-child(1) {
      width: 100%;
    }
    &:nth-child(2) {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2.813333rem;
      transform: translate(-50%, -50%);
      opacity: 0.2;
    }
  }
}
.numScorll_box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: rem(-5)
}
.numScorll_item {
  position: relative;
  display: inline-block;
  .num_unit {
    position: absolute;
    left: 8px;
    transform: translateX(-50%)
    bottom: rem(-45);
    display: inline-block;
    line-height: rem(22);
    padding: rem(8) rem(10)
    font-size: rem(20);
    font-style: normal;
    text-align: center;
    color: #fff;
    background-color: #4694e6;
    border-radius: rem(20);
    visibility: hidden;
    &:before {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #4694e6;
    }
  }
}
.numScorll {
  height: 66px;
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  .numItem {
    display: inline-block;
    height: 60px;
    overflow: hidden;
    margin: 0 1px;
    span {
      display: inline-block;
      position: relative;
      transition: all 1200ms ease-in-out;
      vertical-align: middle;
      font-size: 0;
    }
    i {
      display: block;
      height: 60px;
      line-height: 60px;
      font-size: 60px;
      font-style: normal;
      color: #fff;
      font-weight: normal;
      font-stretch: normal;
      font-family: DINAlternate-Bold;
    }
  }
  b {
    display: inline-block;
    height: 60px;
    margin: 0 1px;
    line-height: 60px;
    font-style: normal;
    font-size: 60px;
    color: #fff;
    font-family: DINAlternate-Bold;
    // vertical-align: middle;
  }
}
</style>
